<template>
    <div>
        <div class="title">请输入个人信息</div>
        <yd-cell-group class="contBackground">
            <yd-cell-item>
                <span slot="left">姓名：</span>
                <yd-input
                    slot="right"
                    v-model="name"
                    required
                    :show-clear-icon="false"
                    placeholder="请输入您的姓名"
                ></yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">手机号：</span>
                <yd-input
                    slot="right"
                    v-model="phone"
                    regex="mobile"
                    placeholder="请输入手机号码"
                ></yd-input>
            </yd-cell-item>
            <yd-cell-item
                arrow
                v-if="couponSource.is_addr==1"
            >
                <span slot="left">收货地址：</span>
                <input
                    slot="right"
                    type="text"
                    @click.stop="addressShow = true"
                    v-model="address"
                    readonly
                    placeholder="请选择收货地址"
                >
            </yd-cell-item>
            <yd-cell-item v-if="couponSource.is_addr==1">
                <yd-textarea
                    slot="right"
                    v-model="addr"
                    placeholder="请输入详细地址"
                    maxlength="50"
                ></yd-textarea>
            </yd-cell-item>
        </yd-cell-group>
        <yd-cityselect
            v-model="addressShow"
            :callback="result1"
            :items="district"
        ></yd-cityselect>
        <div class="cont">
            <div class="couponList">
                <img :src="couponSource.images">
                <div>
                    <div> {{couponSource.title}}</div>
                    <div>
                        {{couponSource.desc}}
                    </div>
                    <div>
                        <div>剩余数量:{{couponSource.remain_counts}}</div>
                        <div>
                            ￥{{couponSource.fee}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <yd-cell-group class="contNum contBackground">
            <yd-cell-item>
                <span slot="left">购买数量(最大购买数量{{couponSource.buy_upper}})</span>
                <span slot="right">
                    <yd-spinner
                        min="1"
                        :max="couponSource.buy_upper"
                        unit="1"
                        v-model="number"
                    ></yd-spinner>
                </span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">优惠券合计金额</span>
                <!-- <span slot="right">￥{{Number(couponSource.coupon_price) * Number(number) }}</span> -->
                <span slot="right">￥{{(couponSource.fee * number).toFixed(2) }}</span>
            </yd-cell-item>
            <yd-cell-item v-if="couponSource.is_reduce_return_money=='yes'">
                <span slot="left">会员减免</span>
                <span slot="right">￥{{couponSource.return_money}}</span>
            </yd-cell-item>
        </yd-cell-group>

        <div class="select">
            <yd-checkbox-group
                v-model="checkbox"
                color="#827cff"
            >
                <yd-checkbox
                    val="1"
                    shape="circle"
                ></yd-checkbox>
                <span>每张可抵扣{{couponSource.unit_cost}}（账户余额： ¥{{money}}）</span>
            </yd-checkbox-group>
        </div>

        <div class="buttom">
            <div>
                <span>合计金额：</span>
                <span>￥{{totalPrice()}}</span>
            </div>
            <div @click="pushOrder()">提交订单</div>
        </div>
    </div>
</template>
<script>
import wxPay from "@/config/wxPay.js";
import District from 'ydui-district/dist/jd_province_city_area_id';
export default {
    name: "couponPay",
    data() {
        return {
            name: '',
            phone: '',
            number: 1,
            money: 0,
            checkbox: [],
            couponSource: {},
            addressShow: false,
            province: '',
            city: '',
            area: '',
            address: '',
            addr: '',
            district: District
        };
    },
    methods: {
        result1(ret) {
            this.address = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
            this.province = ret.itemName1;
            this.city = ret.itemName2;
            this.area = ret.itemName3;
        },
        totalPrice() {
            let num = 0
            if (this.checkbox.length == 0) {
                num = (this.couponSource.fee * this.number).toFixed(2)
            } else {
                num = (this.couponSource.fee * this.number - this.money).toFixed(2)
            }
            if (this.couponSource.is_reduce_return_money == 'yes') {
                num = (num - this.couponSource.return_money).toFixed(2)
            }
            if (num <= 0) {
                return 0;
            } else {
                return num
            }

        },
        // 方法
        getCouponInfo() {
            let params = {
                id: this.$route.query.coupon_id
            };
            this.$post("/coupon/get_detaile", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.couponSource = res.data
                        this.name = res.data.username
                        this.phone = res.data.mobile
                        if (res.data.is_addr == 1) {
                            this.address = res.data.province + res.data.city + res.data.area;
                            this.province = res.data.province;
                            this.city = res.data.city;
                            this.area = res.data.area;
                            this.addr = res.data.addr;
                        }
                    }
                })
                .catch(err => { });
        },
        getUserInfo() {
            let params = {};
            this.$post("/member/get_info", params)
                .then(res => {
                    if (res.code === 20000) {
                        console.log(res.data.member_balance !== null);
                        if (res.data.member_balance !== null) {
                            this.money = res.data.money
                        }
                    }
                })
                .catch(err => { });
        },
        pushOrder() {
            let myreg = /^[1][0-9][0-9]{9}$/;
            if (!this.name) {
                this.$dialog.toast({
                    mes: '请输入姓名',
                    timeout: 1500,
                });
                return;

            } else if (!myreg.test(this.phone)) {
                this.$dialog.toast({
                    mes: '请输入正确的手机号',
                    timeout: 1500,
                });
                return;
            }


            let amount = 0
            let discount = 0
            if (this.checkbox.length == 0) {
                amount = (this.couponSource.fee * this.number).toFixed(2)
            } else {
                if ((this.couponSource.fee * this.number).toFixed(2) <= this.money) {
                    amount = 0
                } else {
                    amount = (this.couponSource.fee * this.number).toFixed(2) - this.money

                }
                if ((this.couponSource.fee * this.number).toFixed(2) >= this.money) {
                    discount = this.money
                } else {
                    discount = (this.couponSource.fee * this.number).toFixed(2)
                }

            }
            let params = {
                username: this.name,//姓名
                mobile: this.phone,//手机号
                coupon_id: this.$route.query.coupon_id,//商品id
                num: this.number, //数量
                dikou_money: discount,// 订单折扣 折扣后的价格
            };
            if (this.couponSource.is_addr == 1) {
                if (!this.address) {
                    this.$dialog.toast({
                        mes: '请选择收货地址',
                        timeout: 1500,
                    });
                    return;
                }
                if (!this.addr) {
                    this.$dialog.toast({
                        mes: '请输入详细地址',
                        timeout: 1500,
                    });
                    return;
                }
                params.province = this.province;
                params.city = this.city;
                params.area = this.area;
                params.addr = this.addr;
            }
            this.$post("/coupon/buy_coupon", params)
                .then(res => {
                    if (res.code == 20000) {
                        if (!res.is_wxpay) {
                            this.$dialog.toast({
                                mes: '余额支付成功',
                                timeout: 2000,
                                icon: 'success',
                                callback: () => {
                                    this.$router.replace('/order/orderAll')
                                }
                            });
                        } else {
                            wxPay(res.data, this.WXPaySucceed);
                        }
                    } else {
                        this.$dialog.toast({
                            mes: res.msg,
                            timeout: 2000,
                        });
                    }
                })
                .catch(err => { });
        },
        WXPaySucceed() {
            this.$dialog.toast({
                mes: '支付成功',
                timeout: 2000,
                icon: 'success',
                callback: () => {
                    this.$router.replace('/order/orderAll')
                }
            });
        },
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#e1deff");
    },
    created() {
        // 实例创建完成
        this.getUserInfo();
        this.getCouponInfo();
    },
};
</script>
<style lang="less" scoped>
@import url("../../asset/css/couponPay");
</style>